<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.detail')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" v-model="cfg.multi"> {{$t('common.multi')}}
              </label>
            </div>
          </div>
        </div>        
        <div class="form-group">
          <label class="col-sm-2 control-label">{{label}}</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="cfg.startIp" v-validate:start-ip="{ip: true}">
            <strong class="text-danger my-error" v-if="$form.startIp.ip">{{$t('error.invalidAddr')}}</strong>
          </div>
        </div>
        <div class="form-group" v-if="cfg.multi">
          <label class="col-sm-2 control-label">{{$t('common.endIp')}}</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" v-model="cfg.endIp" v-validate:end-ip="{ip: true}">
            <strong class="text-danger my-error" v-if="$form.endIp.ip">{{$t('error.invalidAddr')}}</strong>
          </div>
        </div>
      </form> 
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>   
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import {getIpaddrList} from 'libs/utils.js'

export default {
  data () {
    return {
      show: false,
      cfg: {
        multi: false,
        startIp: '',
        endIp: '' 
      },
      saveEvent: ''
    }
  },
  computed: {
    label () {
      if (this.cfg.multi) {
        return this.$t('common.startIp')
      } else {
        return this.$t('common.ipaddr')
      }
    }
  },
  methods: {
    resetDftCfg () {
      this.cfg.multi = true
      let ipPrefix = window.location.hostname.split('.').slice(0, 3).join('.')
      this.cfg.startIp = ipPrefix + '.1'
      this.cfg.endIp = ipPrefix + '.254'
    },
    resetCfg () {
      if (window.localStorage) {
        let str = window.localStorage.getItem('addIpCfg')
        if (!str) {
          this.resetDftCfg()
          return
        }

        let cfg = JSON.parse(str)
        if (!cfg) {
          this.resetDftCfg()
          return
        }    

        this.cfg.multi = cfg.multi
        this.cfg.startIp = cfg.startIp
        this.cfg.endIp = cfg.endIp            
      } else {
        this.resetDftCfg()
      }
    },
    onQuit () {
      this.show = false
    },
    onSaveChanges () {
      if (this.$form.startIp.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      if (this.cfg.multi) {
        if (this.$form.endIp.invalid) {
          toast.w(this, this.$t('common.fail'), this.$t('error.params'))
          return
        }
      } else {
        this.cfg.endIp = this.cfg.startIp
      }

      let ipList = getIpaddrList(this.cfg.startIp, this.cfg.endIp)
      if (ipList.length <= 0) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }

      if (window.localStorage) {
        let cfg = {
          multi: this.cfg.multi,
          startIp: this.cfg.startIp,
          endIp: this.cfg.endIp
        }
        window.localStorage.setItem('addIpCfg', JSON.stringify(cfg))
      }

      ebus.emit(this.saveEvent, ipList)
      this.show = false
    },
    onShow (val) {
      this.saveEvent = (val && val.saveEvent) || 'add-ip'
      this.resetCfg()
      this.show = true
    }
  },
  ready () {
    ebus.on('show-add-ip-detail', this.onShow)
  }
}
</script>

<style>
</style>